import { useMemo } from "preact/hooks";
import { settings } from "../settings";
import { themeNames } from "../engines";
import { isExternalFavoUrl, parseExternalFavoUrl } from "../Vendor";

const styleNames = ["", "btn-soft", "btn-outline", "btn-dash", "btn-ghost"];

const FavoFlex = ({ box }) => {
  const target = useMemo(
    () =>
      settings.value.favo.newTab && isExternalFavoUrl(box.url)
        ? "_blank"
        : "_self",
    [box],
  );
  const url = useMemo(() => parseExternalFavoUrl(box.url), [box]);

  return (
    <a
      href={url}
      target={target}
      rel="noopener noreferrer"
      role="button"
      class={`btn btn-sm m-1 rounded-(--favo-flex-radius) ${
        settings.value.favo.flexTheme === 0
          ? themeNames[box.title.length % themeNames.length][0]
          : themeNames[settings.value.favo.flexTheme - 1][0]
      } ${styleNames[settings.value.favo.flexStyle]}`}
    >
      {box.title}
    </a>
  );
};

export default FavoFlex;
